﻿@page "/datetime-range"
@inject IStringLocalizer<DateTimeRanges> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["Description"]</h4>

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <DateTimeRange @bind-Value="@NormalDateTimeRangeValue" OnConfirm="NormalOnConfirm" />
    <ConsoleLogger @ref="NormalLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@BindValueDemoDateTimeRangeValue" OnValueChanged="v => BindValueDemoOnValueChanged(v, 1)" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["Limit"]" />
                <Display TValue="string" Value="@BindValueDemoRange" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MaxMinValueTitle"]" Introduction="@Localizer["MaxMinValueIntro"]" Name="MaxMinValue">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@MaxMinDateTimeRangeValue"
                           OnValueChanged="v => MaxMinOnValueChanged(v, 2)"
                           MinValue="DateTime.Today.AddDays(-7)"
                           MaxValue="DateTime.Today.AddDays(7)" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["Limit"]" />
                <Display TValue="string" Value="@MaxMinRange" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange Value="@DisabledDateTimeRangeValue" IsDisabled="@IsDisabled" />
        </div>
        <div class="col-12 col-sm-6">
            <Switch @bind-Value="@IsDisabled" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SidebarTitle"]" Introduction="@Localizer["SidebarIntro"]" Name="Sidebar">
    <p>@((MarkupString)Localizer["SidebarTip"].Value)</p>
    <DateTimeRange Value="@SidebarDateTimeRangeValue" ShowSidebar="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["TodayTitle"]" Introduction="@Localizer["TodayIntro"]" Name="Today">
    <p>@((MarkupString)Localizer["TodayTip"].Value)</p>
    <DateTimeRange Value="@TodayDateTimeRangeValue" ShowToday="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
    <FormInlineSwitch @bind-Value="@ValidateFormRowType" class="mb-3" />

    <ValidateForm Model="@ValidateFormModel">
        <div class="@ValidateFormClassString">
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@ValidateFormModel.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimeRange @bind-Value="@ValidateFormModel.Range" />
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["Submit"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["AutoCloseTitle"]" Introduction="@Localizer["AutoCloseIntro"]" Name="AutoClose">
    <DateTimeRange Value="@AutoCloseDateTimeRangeValue" ShowSidebar="true" AutoCloseClickSideBar="true" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
